<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import { ref, watch } from "vue";
import { userRegisterService, userLoginService } from "@/api/user.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores";

const isRegister = ref(false);
const router = useRouter();
const userStore = useUserStore();
const formModel = ref({
  username: "",
  password: "",
  repassword: "",
});
const rules = {
  username: [
    {
      required: true,
      message: "用户名不能为空",
      trigger: "blur",
    },
    { min: 5, max: 10, message: "用户名长度在5-10之间", trigger: "blur" },
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
    { pattern: /^\S{5,16}$/, message: "密码长度在5-16之间", trigger: "blur" },
  ],
  repassword: [
    {
      validator: (rule, value, callback) => {
        if (value !== formModel.value.password) {
          callback(new Error("两次密码不一致"));
        } else {
          callback();
        }
      },
    },
  ],
};
const form = ref();
const register = () => {
  form.value.validate(async (valid) => {
    if (valid) {
      const res = await userRegisterService(formModel.value);
      ElMessage.success("注册成功");
      isRegister.value = false;
    }
  });
};
const login = () => {
  form.value.validate(async (valid) => {
    if (valid) {
      const {
        data: { token },
      } = await userLoginService(formModel.value);
      userStore.setToken(token);
      ElMessage.success("恭喜您，登录成功！");
      router.push("/");
    }
  });
};
watch(isRegister, () => {
  formModel.value = {
    username: "",
    password: "",
    repassword: "",
  };
});
</script>

<template>
  <el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <!-- 登录 -->
      <el-form
        ref="form"
        size="large"
        v-if="!isRegister"
        :model="formModel"
        :rules="rules"
      >
        <el-form-item>
          <h1>登录</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input
            placeholder="请输入用户名"
            :prefix-icon="User"
            v-model="formModel.username"
            prop="username"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            :prefix-icon="Lock"
            v-model="formModel.password"
            prop="password"
            @keyup.enter="login"
          />
        </el-form-item>
        <el-form-item>
          <div class="flex">
            <el-checkbox label="记住密码" size="large" />
            <el-link type="primary">忘记密码？</el-link>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="button" @click="login"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-link type="default" @click="isRegister = !isRegister"
            >注册 -></el-link
          >
        </el-form-item>
      </el-form>
      <!-- 注册 -->
      <el-form v-else size="large" :rules="rules" :model="formModel" ref="form">
        <el-form-item>
          <h1>注册</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input
            placeholder="请输入用户名"
            :prefix-icon="User"
            v-model="formModel.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            :prefix-icon="Lock"
            type="password"
            v-model="formModel.password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            placeholder="请再次输入密码"
            :prefix-icon="Lock"
            type="password"
            v-model="formModel.repassword"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="button" @click="register"
            >注册</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-link type="default" @click="isRegister = !isRegister"
            ><- 返回</el-link
          >
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.login-page {
  height: 100vh;
  .bg {
    background-image: url("@/assets/logo.png"), url("@/assets/login_bg.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center 30%, center center;
    background-size: 40% auto, cover;
  }
  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .flex {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .button {
    width: 100%;
  }
}
</style>
